// 购物车页面的功能
$(function () {


    // function init() {
    //     if (localStorage.getItem("cart")) {
    //         let arr = JSON.parse(localStorage.getItem("cart"));
    //         for (let i = 0; i < arr.length; i++) {
    //             var strHtml = ``;
    //             strHtml += `
    //                 <div class="top">
    //                     <img src="${arr[i].img}" alt="">
    //                     <div class="txt">
    //                         <div class="name">${arr[i].sname}</div>
    //                         <div class="itemcount">x ${arr[i].number}</div>
    //                     </div>
    //                     <div class="price">
    //                         ￥<span>${arr[i].price}</span>
    //                     </div>
    //                 </div>
    //                 `;
    //             // console.log($("#count"));
    //             $("#count").text($("#count").text() - 0 + arr[i].number)
    //             // 商品总计变化
    //             $(".sumprice").text($(".sumprice").text() - 0 + (arr[i].number) * arr[i].price)
    //             $(".cart-specially .messagebox").append(strHtml);
    //         }
    //         // $(".header-content-right .sp1 #count").text(arr.length);
    //         $("#count").addClass("count");
    //         // if (arr.length == 0) {
    //         //     return
    //         // } else {
    //         //     //红色盒子的i+1
    //         //     $(".count").text(arr[i].number)
    //         //     // 计数*1
    //         //     $(".itemcount").text("x" + arr[i].number)
    //         //     // 商品总计变化
    //         //     $(".sumprice").text((arr[i].number) * arr[i].price)
    //         // }
    //     }
    // }
    // init();

    function init() {
        let num = 0;
        let numarr = [];
        let pricearr = []
        let sum = 0;
        let arr = JSON.parse(localStorage.getItem("cart"));
        for (var i = 0; i < arr.length; i++) {
            num += arr[i].number - 0;
            numarr.push(arr[i].number)
            pricearr.push(arr[i].price)
            sum += arr[i].number * arr[i].price;
        }
        // console.log(sum);
        // console.log(pricearr);
        $(".count").text(num);
        $(".itemcount").each((index, item) => {
            $(item).text(numarr[index])
        })
        $(".sumprice").text(sum)


    }
    // init()
    // 1.全选和全不选
    // 把全选按钮状态复制给其它按钮
    // 核心:把当前是否选中的状态赋给其它复选框
    $(".checkall").change(function () {
        // console.log($(".checkall"));
        $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"))
        // 全选中就添加背景颜色
        if ($(this).prop("checked")) {
            $(".list-item").addClass("check-list-item")

        } else {
            $(".list-item").removeClass("check-list-item")
        }

        let sum = 0;
        // let const=0;
        let nnn = 0
        $(".j-checkbox").each((index, item) => {
            if ($(item).prop("checked")) {
                sum += $(item).parent().find(".sum").text().split("￥")[1] - 0;
                nnn += $(item).parent().find(".num").val() - 0
            }
        })
        $(".s-b-right .allsum").text("￥" + sum);
        $(".s-b-right button i").text(nnn);
        console.log($(".s-b-right button i"));
        // getSum()
    })

    // return
    // // 3.增减商品数量模块 和// 4.商品的小计
    // $(".increment").click(function () {
    //     var n = $(this).siblings(".num").val()
    //     n++;
    //     $(this).siblings(".num").val(n)
    //     // 4.计算小计模块,根据文本框的值,乘以当前的价格 就是商品的小计
    //     var p = $(this).parent().siblings(".price").html()
    //     // 把羊截取掉
    //     p = p.substr(1)
    //     $(this).parent().siblings(".sum").html("￥" + p * n)
    //     getSum()
    // })
    // $(".decrement").click(function () {
    //     var n = $(this).siblings(".num").val()
    //     if (n == 1) {
    //         return false
    //     }
    //     n--;
    //     $(this).siblings(".num").val(n)
    //     // 4.计算小计模块,根据文本框的值,乘以当前的价格 就是商品的小计
    //     var p = $(this).parent().siblings(".price").html()
    //     // 把羊截取掉
    //     p = p.substr(1)
    //     $(this).parent().siblings(".sum").html("￥" + p * n)
    //     getSum()
    // })
    // // 5.用户体验优化修改文本框的值小计发生改变
    // $(".number>.num").change(function () {
    //     var n = $(this).val()
    //     // 当前商品的单价
    //     var p = $(this).parent().siblings(".price").html()
    //     p = p.substr(1);
    //     $(this).parent().siblings(".sum").html("￥" + p * n)
    //     getSum()
    // })
    // // 第一次打开页面渲染价格
    // getSum()
    // // 6计算总计和总额模块,自己封装一个函数
    // function getSum() {
    //     var count = 0;//计算总件数
    //     var money = 0;//计算总价钱
    //     $(".number>.num").each(function (index, item) {
    //         count += parseInt($(item).val());
    //         $(".s-b-right i").text(count)
    //     })
    //     // 获取所有的小计计算总额
    //     $(".list-item .sum").each(function (index, item) {
    //         money += parseFloat($(item).text().substr(1))
    //     })
    //     $(".allsum").text("￥" + money.toFixed(2))
    // }

    // // 7.删除商品模块
    // $(".delete").on("click", function () {
    //     // 1.删除当前的商品
    //     $(this).parent(".list-item").remove()
    //     getSum()
    // })
    // // 2.删除选中的商品
    // $(".checked-delete").on("click", function () {
    //     $(".j-checkbox:checked").parent(".list-item").remove()
    //     getSum()
    // })

    //模拟数据
    var dataList = JSON.parse(localStorage.getItem("cart") || '[]');
    var strHtml = ``;
    dataList.forEach(function (item) {
        strHtml += `
         <div class="list-item">
                     <input type="checkbox" class="j-checkbox">
                     <img src="${item.img}" alt="">
                     <div class="txt">
                         <div class="txt1">${item.sname}</div>
                         <div class="txt2">${item.explain}</div>
                     </div>
                     <div class="price">￥${item.price}</div>
                     <div class="number">
                         <a href="javascript:;" class="sp1 decrement">-</a>
                         <input type="text" value="${item.number}" class="num">
                         <a href="javascript:;" class="sp2 increment">+</a>
                     </div>
                     <div class="sum">￥${item.price * item.number}</div>
                     <div class="delete" data-id=${item.id}>删除</div>
                 </div>
         `
    })
    $(".s-info").html(strHtml)
    getSum()


    // 2点击里面的复选框,全选自动选上去
    $(".j-checkbox").change(function () {
        // 被选中的个数.j-checkbox:checked
        if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
            $(".checkall").prop("checked", true)
        } else {
            $(".checkall").prop("checked", false)
        }
        // 选中就添加背景颜色
        if ($(this).prop("checked")) {
            $(this).parent(".list-item").addClass("check-list-item")
        } else {
            $(this).parent(".list-item").removeClass("check-list-item")
        }
        // getSum()
    })


    if ($(".list-item").length != 0) {
        $(".empty").hide()
        $(".section").show()
    } else {
        $(".empty").show()
        $(".section").hide()
    }
    // let self = this;
    $(".number").on("click", 'a', function () {
        // 1.商品的++和--

        var dataList = JSON.parse(localStorage.getItem("cart") || '[]');
        for (var i = 0; i < dataList.length; i++) {
            var num = dataList[i].number
        }

        if ($(this).hasClass("decrement")) {
            var num = $(this).siblings(".num").val()

            if (num == 1) {
                return false
            }
            num--;
            // init()
            $(this).siblings(".num").val(num)
            getSum()
            // $(self).find("#count").text(num)
            // $(self).find(".itemcount").text(num);
            // 4.计算小计模块,根据文本框的值,乘以当前的价格 就是商品的小计
            var p = $(this).parent().siblings(".price").html()
            // 把羊截取掉
            p = p.substr(1)
            $(this).parent().siblings(".sum").html("￥" + p * num)
            getSum()

            $(".j-checkbox").trigger("change")
        }
        if ($(this).hasClass("increment")) {

            var num = $(this).siblings(".num").val()
            num++;

            $(this).siblings(".num").val(num);
            // init()
            getSum();
            // $(self).find("#count").text(num)
            // $(self).find(".itemcount").text(num);
            var p = $(this).parent().siblings(".price").html()
            // 把羊截取掉
            p = p.substr(1)

            $(this).parent().siblings(".sum").html("￥" + p * num)
            getSum()


            $(".j-checkbox").trigger("change")
        }
        console.log(this);
        // var sname = $(this).parent().siblings(".txt").children(".txt1").text()
        var nameArr = []
        var number = []
        // let number = $(".number .num").val() - 0;
        console.log(number);
        //2. 判断商品的名字和点击的名字是否相同,这样就是修改需要的数量了
        $(".list-item>").find(".txt1").each((index, item) => {
            nameArr.push($(item).text())
        })
        $(".list-item>").find(".num").each((index, item) => {
            number.push($(item).val() - 0)
        })
        console.log(nameArr);
        /* for (var i = 0; i < $(".list-item").length; i++) {
            console.log(this);
            nameArr.push(sname)
        }
        console.log($(".list-item").length); */

        /*  for (var i = 0; i < dataList.length; i++) {
             if (dataList[i].sname == sname) {
                 nameArr.push(sname);
                 // break;
             }
         } */
        console.log(dataList.length);
        for (var i = 0; i < dataList.length; i++) {
            if (dataList[i].sname == nameArr[i]) {
                dataList[i].number = number[i];
                // break;
            }
        }

        localStorage.setItem("cart", JSON.stringify(dataList));
        init()
    })

    // 3.点击删除，
    $(".list-item>.delete").on("click", function () {
        layer.confirm('are you 确定删除me？', {
            btn: ['确定', '取消'] //按钮
        }, (index) => {
            layer.close(index)
            // 先删除数据
            var dataList = JSON.parse(localStorage.getItem("cart") || '[]');
            var sname = $(this).siblings(".txt").children(".txt1").text()
            console.log(sname);
            for (var i = 0; i < dataList.length; i++) {
                if (dataList[i].sname == sname) {
                    console.log(i);
                    dataList.splice(i, 1)
                    break;
                }
            }
            localStorage.setItem("cart", JSON.stringify(dataList));
            //删除自己的眼睛
            $(this).parent(".list-item").remove()
            getSum()
            if ($(".list-item").length != 0) {
                $(".empty").hide()
                $(".section").show()
            } else {
                $(".empty").show()
                $(".section").hide()
            }
            init()
        }, () => {
        });
    })
    //删除选中的商品
    $(".checked-delete").on("click", function () {
        layer.confirm('are you 确定删除All？', {
            btn: ['确定', '取消'] //按钮
        }, (index) => {
            layer.close(index)
            // init()
            var dataList = JSON.parse(localStorage.getItem("cart") || '[]');
            var sname = $(this).parents(".s-bottom").prev(".s-info").find(".txt1").text();
            // $(".list-item>").find(".txt1").each((index, item) => {
            //     nameArr.push($(item).text())
            // })

            var nameArr = [];
            // console.log($(".j-checkbox:checked").parent().find(".txt1"));
            $(".j-checkbox:checked").parent().find(".txt1").each((index, item) => {
                nameArr.push($(item).text())
            })
            console.log(nameArr);

            for (var i = 0; i < nameArr.length; i++) {
                for (var j = 0; j < dataList.length; j++) {
                    if (dataList[j].sname == nameArr[i]) {
                        dataList.splice(j, 1)
                        // break;
                    }
                }
            }
            localStorage.setItem("cart", JSON.stringify(dataList));
            // 删除自己的眼睛
            $(".j-checkbox:checked").parent(".list-item").remove()
            getSum()
            if ($(".list-item").length != 0) {
                $(".empty").hide()
                $(".section").show()
            } else {
                $(".empty").show()
                $(".section").hide()
            }
            init()
        }, () => {
        });
    })

    // 4.用户体验优化修改文本框的值小计发生改变
    $(".number>.num").change(function () {
        // 修改cookie的数据
        var dataList = JSON.parse(localStorage.getItem("cart") || '[]');
        var name = $(this).parent().siblings(".txt").children(".txt1").text()

        var num = $(this).val()
        for (var i = 0; i < dataList.length; i++) {
            if (dataList[i].name == name) {
                dataList[i].number = num;
                break;
            }
        }
        localStorage.setItem("cart", JSON.stringify(dataList));
        // 修改自己的眼睛
        var n = $(this).val()
        // 当前商品的单价
        var p = $(this).parent().siblings(".price").html()
        p = p.substr(1);
        $(this).parent().siblings(".sum").html("￥" + p * n)
        getSum()
    })

    // 5计算总计和总额模块,自己封装一个函数
    function getSum() {
        var count = 0;//计算总件数
        var money = 0;//计算总价钱
        var dataList = JSON.parse(localStorage.getItem("cart") || '[]');
        // if (dataList.length == 0) {
        //     $(".s-b-right i").text(0)
        // } else {
        //     $(".number>.num").each(function (index, item) {
        //         count += parseInt($(item).val());
        //         $(".s-b-right i").text(count)
        //     })
        // }
        $(".j-checkbox").click(function () {
            money = 0;
            count = 0;
            // $(".s-b-right i").text(count)
            // $(".allsum").text("￥" + money.toFixed(2))
            $(".j-checkbox").each((index, item) => {
                if ($(item).prop("checked")) {
                    count += parseInt($(item).parent(".list-item").children(".number").children(".num").val());
                    money += parseFloat($(item).parent(".list-item").children(".sum").text().substr(1))
                }
                $(".s-b-right i").text(count)
                $(".allsum").text("￥" + money.toFixed(2))

            })
        })

        // 获取所有的小计计算总额

    }

    console.log($(".s-b-right .button"));
    let self = this
    $(".s-b-right").find("button").on("click", function () {
        layer.confirm('您确定支付吗？', {
            btn: ['确定', '取消'] //按钮
        }, (index) => {
            layer.close(index)
            layer.msg("支付成功");
            var dataList = JSON.parse(localStorage.getItem("cart") || '[]');
            var sname = $(this).parents(".s-bottom").prev(".s-info").find(".txt1").text();
            // $(".list-item>").find(".txt1").each((index, item) => {
            //     nameArr.push($(item).text())
            // })

            var nameArr = [];
            // console.log($(".j-checkbox:checked").parent().find(".txt1"));
            $(".j-checkbox:checked").parent().find(".txt1").each((index, item) => {
                nameArr.push($(item).text())
            })
            console.log(nameArr);

            for (var i = 0; i < nameArr.length; i++) {
                for (var j = 0; j < dataList.length; j++) {
                    if (dataList[j].sname == nameArr[i]) {
                        dataList.splice(j, 1)
                        // break;
                    }
                }
            }
            localStorage.setItem("cart", JSON.stringify(dataList));
            // 删除自己的眼睛
            $(".j-checkbox:checked").parent(".list-item").remove()
            getSum()
            if ($(".list-item").length != 0) {
                $(".empty").hide()
                $(".section").show()
            } else {
                $(".empty").show()
                $(".section").hide()
            }
            init()
        }, function () {
            if ($(".j-checkbox:checked").length == 0) {
                layer.msg("支付失败");
            }
        });
    })
})



